<!DOCTYPE html>
<html lang="zh_CN" class="h100">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderder" content="webkit" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <title>安徽省社会消费品零售总额预测系统</title>
    <link rel="shortcut icon" href="../../public/images/pm.ico" />
    <link rel="bookmark" href="../../public/images/pm.ico" type="image/x-icon" 　 />
    <link rel="stylesheet" type="text/css" href="../../public/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../../public/js/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../public/css/main.css" />
    <style>
        .layui-form-label {
            width: 100px;
        }
    </style>
</head>

<body class="h100">
    <div class="container-fluid">
        <div class="row entry-row">
            <div>
                <div class="data-entry-title">
                    <p><i class="glyphicon glyphicon-cog" style="vertical-align: sub;font-size:18px;color:#205ea7;margin-right:10px;"></i><span>系统管理</span></p>
                </div>
                <div class="management-content">
                    <div class="managemet-btn">
                        <span class="bule add"><i class="add glyphicon glyphicon-plus"></i>添加</span>
                        <input class="search-input" type="text" class="form-control" placeholder="输入姓名/用户名查询">
                        <span class="bule search"><i class="glyphicon glyphicon-search"></i>查询</span>
                    </div>
                    <div class="managemene-table">
                        <table class="layui-table">

                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>角色</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody class="table-content">
                                <tr>
                                    <td><input type="checkbox" name="" class="td-checkbox"><span>1</span></td>
                                    <td>admin</td>
                                    <td>管理员</td>
                                    <td class="td-btn">
                                        <span class="bule passoword">重置密码</span>
                                        <span class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                        <span class="red"><i class="delete glyphicon glyphicon-trash"></i>删除</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 弹框 -->
    <div class="add-dialog dn" id="add-dialog">
        <div class="dialog-content">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select name="authority" lay-verify="required">
                            <option value="0">管理人员</option>
                            <option value="1">预测人员</option>
                            <option value="2">分析人员</option>
                            <option value="3">决策人员</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" placeholder="初始密码123456" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn add-btn" lay-submit="" lay-filter="formDemo1">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="add-dialog dn" id="edit-dialog">
        <div class="dialog-content">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input username">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select name="authority" lay-verify="required" class="authority">
                            <option value="0">管理人员</option>
                            <option value="1">预测人员</option>
                            <option value="2">分析人员</option>
                            <option value="3">决策人员</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" placeholder="初始密码123456" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn add-btn" lay-submit="" lay-filter="formDemo2">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="add-dialog dn" id="password-dialog">
        <div class="dialog-content">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">当前密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码找回</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary closebtn">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="../../public/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../public/js/layui/layui.js"></script>
    <script type="text/javascript">
        $(function() {
            var url = "http://ansocialsale.frpgz1.idcfengye.com"

            function getList() {
                $.ajax({
                    type: "GET",
                    url: url + "/api/userList",
                    contentType: "application/json",
                    data: {
                        "page": "1",
                        "POST_PRE_PAGE": "5"
                    },
                    dataType: "json",
                    success: function(data) {
                        var str = ""
                        for (var i = 0; i < data.username.length; i++) {
                            str += `
                        <tr>
                            <td><span>${data.id[i]}</span></td>
                            <td>${data.username[i]}</td>
                            <td>${data.authority[i]}</td>
                            <td class="td-btn">
                                <span class="bule passoword">重置密码</span>
                                <span data-name="${data.username[i]}" data-authority="${data.authority[i]}" class="yellow edit"><i class="edit glyphicon glyphicon-pencil"></i>编辑</span>
                                <span data-name="${data.username[i]}" class="red delete"><i class="glyphicon glyphicon-trash"></i>删除</span>
                            </td>
                        </tr>
                      `
                        }
                        $(".table-content").html(str)
                    }
                });
            }
            getList()
            $(document).on('click', '.delete', function() {
                    var name = $(this).attr('data-name')
                    $.ajax({
                        type: "GET",
                        url: url + "/api/userList/delete",
                        contentType: "application/json",
                        data: {
                            "username": name
                        },
                        dataType: "json",
                        success: function(data) {
                            layer.msg('删除成功');
                            getList()
                        }
                    });
                })
                //添加用户
            $(".add").click(function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '添加',
                        area: ['500px', '300px'],
                        shade: false,
                        content: $("#add-dialog"),
                        success: function(data) {
                            $('.layui-input').val("")
                        }
                    });
                });
            })
            $(".add-btn").click(function() {
                layui.use('layer', function() {
                    var form = layui.form
                    form.on('submit(formDemo1)', function(data) {
                        var username = data.field.username,
                            password = data.field.password,
                            authority = data.field.authority;
                        $.ajax({
                            type: "GET",
                            url: "http://ansocialsale.frpgz1.idcfengye.com/api/userList/add/?username=" + username + '&password=' + password + '&authority=' + authority,
                            contentType: "application/json",
                            success: function(data) {
                                layer.msg('成功');
                                setTimeout(function() {
                                    layer.closeAll();
                                }, 2000)
                                getList()
                            }
                        });
                        return false;
                    });
                })
            })
      
            $(document).on('click', '.edit', function() {
                var name = $(this).attr('data-name')
                var authority = $(this).attr('data-authority')
                layui.use('layer', function() {
                    var layer = layui.layer;
                    var form = layui.form
                    layer.open({
                        type: 1,
                        title: '添加',
                        area: ['500px', '300px'],
                        shade: false,
                        content: $("#edit-dialog"),
                        success: function(layero, index) {
                          
                            $('#edit-dialog .username').val(name)
                            if(authority=="管理员"){
                              $('#edit-dialog .authority').val(0)
                            }
                            if(authority=="预测人员"){
                              $('#edit-dialog .authority').val(1)
                            }
                            if(authority=="分析人员"){
                              $('#edit-dialog .authority').val(2)
                            }
                            if(authority=="决策人员"){
                              $('#edit-dialog .authority').val(3)
                            }
                            form.render();
                            $("#edit-dialog .add-btn").attr("data-name", name)
                        }
                    });
                });
            })
            $("#edit-dialog .add-btn").click(function() {
                var name = $(this).attr('data-name')
                layui.use('layer', function() {
                    var form = layui.form
                    form.on('submit(formDemo2)', function(data) {
                        $.ajax({
                            type: "GET",
                            url: "http://ansocialsale.frpgz1.idcfengye.com/api/userList/update/",
                            contentType: "application/json",
                            data: {
                                username: name,
                                username_new: data.field.username,
                                password: data.field.password,
                                authority: data.field.authority
                            },
                            dataType: "json",
                            success: function(data) {
                                layer.msg('成功');
                                setTimeout(function() {
                                    layer.closeAll();
                                }, 2000)
                                getList()
                            }
                        });
                        return false;
                    });
                })
            })
            $(document).on('click', '.passoword', function() {
                layui.use('layer', function() {
                    var layer = layui.layer;
                    layer.open({
                        type: 1,
                        title: '重置密码',
                        area: ['500px', '400px'],
                        shade: false,
                        content: $("#password-dialog")
                    });
                });
            })
            $(".closebtn").click(function() {
                layer.closeAll();
            })
            layui.use('form', function() {
                var form = layui.form;

                //监听提交
                form.on('submit(formDemo)', function(data) {
                    // layer.msg(JSON.stringify(data.field));
                    layer.closeAll();
                });
            });
        })
    </script>
</body>

</html>